<template>
	<view class="content">
		<view class="fixed" @click="closeData"></view>
		<view class="child-system">
			<view class="controller">
				<view class="quit" @click="closeData">关闭</view>
				<!-- <view class="reset" @click="resetData">重置</view> -->
				<view class="ok" @click="ok">确认</view>
			</view>
			<view class="search">
				<u-search height="60" v-if="keywordsFilter"   @custom="KeywordFilter" v-model="search.key" placeholder="输入关键字进行搜索" />
			</view>
			<view class="item-list">
				<template v-show="station.length > 0">
					<u-radio-group v-model="name_list" v-if="radio" :wrap="wrap" @change="checkboxGroupChange">
						<u-radio v-for="(item, index) in stationList" :key="item.id" @change="checkBoxChange" :name="item.name">{{ item.name }}</u-radio>
					</u-radio-group>
					<u-checkbox-group v-else :wrap="wrap" @change="checkboxGroupChange">
						<u-checkbox v-model="item.checked" v-for="(item, index) in stationList" @change="checkBoxChange" :key="item.name" :name="item.name">{{ item.name }}</u-checkbox>
					</u-checkbox-group>
					<!-- <view class="item" v-for="(item, index) in station" :key="index">{{item.text}}</view> -->
				</template>
				<view v-show="station.length == 0" class="empty">无数据</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	props: ['station', 'radio', 'faultStatus', 'stationName', 'keywordsFilter'],
	data() {
		return {
			stationList: [],
			wrap: true,
			search: {
				timer: null,
				key: ''
			},
			stationCopy: [],
			name_list: []
		};
	},

	watch: {
		station: {
			handler(news, olds) {
				if (this.stationName) {
					this.name_list = this.radio ? this.stationName : this.stationName.split(',');
					news.forEach((item) => {
						if (this.name_list.includes(item.name)) {
							item.checked = true;
						} else {
							item.checked = false;
						}
					});
				} else {
					news.forEach((item) => {
						item.checked = false;
					});
					this.name_list = this.radio ? '' : [];
				}
				this.stationCopy = JSON.parse(JSON.stringify(news));
				this.stationList = JSON.parse(JSON.stringify(news));
			},

			immediate: true
		}
	},
	methods: {
		checkBoxChange(param) {
			console.log('param', param);
			if (this.radio) {
				this.name_list = param;
				this.stationCopy.forEach((item) => {
					if (this.param == item.name) {
						item.checked = true;
					} else {
						item.checked = false;
					}
				});
			} else {
				if (param.value) {
					this.name_list.push(param.name);
				} else {
					console.log('this.name_list---', JSON.stringify(this.name_list));
					let index = this.name_list.findIndex((item) => item == param.name);
					this.name_list.splice(index, 1);
					console.log('this.name_list---1', JSON.stringify(this.name_list), index);
				}
				this.stationCopy.forEach((item) => {
					if (this.name_list.includes(item.name)) {
						item.checked = true;
					} else {
						item.checked = false;
					}
				});
			}
		},
		KeywordFilter() {
			if (this.search.timer !== null) {
				clearTimeout(this.search.timer);
			}
			this.search.timer = setTimeout(() => {
				this.getKeyword();
			}, 300);
		},
		getKeyword() {
			if (this.search.key === undefined || this.search.key === null || this.search.key === '') {
				this.stationList = this.stationCopy;
			} else {
				this.stationList = this.stationCopy.filter((item) => {
					if (item['name'].includes(this.search.key)) {
						return true;
					}
				});
				console.log('this.stationList', this.stationList);
			}
		},
		closeData() {
			this.$emit('close');
		},
		checkboxGroupChange(e) {
			console.log('e', e);
			// this.name_list = [...this.name_list,...e]
			// this.stationCopy.forEach((item) => {
			// 	if (this.name_list.includes(item.name)) {
			// 		item.checked = true;
			// 	} else {
			// 		item.checked = false;
			// 	}
			// });
		},
		ok() {
			let id = [];
			let name = [];
			if (this.name_list.length&&!this.radio) {
				this.station.map((item) => {
					if (this.name_list.includes(item.name)) {
						id.push(item.id);
						name.push(item.name);
					}
				});
			} else {
				this.station.map((item) => {
					if (this.name_list==item.name) {
						id.push(item.id);
						name.push(item.name);
					}
				});
			}
			console.log('this.station.station', this.station);
			if (this.station.length == 0) {
				this.name_list = '';
			}
			this.$emit('setStation', {
				name: name,
				id
			});
		}
	}
};
</script>

<style scoped>
.search {
	padding: 5px 10px;
}
.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: auto;
	z-index: 100;
	background-color: rgba(0, 0, 0, 0.6);

	transition: all 0.25s ease-in-out 0s;
	transform: scale(1, 1);
}

.content {
	/* background: #f9fbfe; */
	height: 100%;
}

.system {
	width: 91.5%;
	margin: 10px auto;
	color: #000;
}

.system > .title {
	line-height: 36px;
	font-size: 16px;
	font-weight: bold;
}

.system .add {
	float: right;
	color: #fff;
	background: #307be0;
	width: 70px;
	line-height: 36px;
	font-size: 12px;
	text-align: center;
	border-radius: 4px;
}

.system .list {
	border-radius: 4px;
	font-size: 14px;
	margin-top: 15px;
	color: #303133;
	box-shadow: 0 0 2px 2px rgb(0 0 0 / 10%);
}

.system > .list:last-child {
	margin-bottom: 40px;
}

.system .list > .title {
	background: #d8d8d8;
	line-height: 50px;
	padding: 0 15px;
	height: 50px;
}

.system .list > .title > .remove {
	color: red;
	float: right;
}

.list > .list-info {
	background: #fff;
	padding-left: 15px;
}

.list > .list-info .hr {
	height: 1px;
	background: #d8d8d8;
}

.child-system {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	background: #fff;
	color: #000;
	font-size: 12px;
	z-index: 100;
	/* height: 50vh;overflow: auto; */
}

.child-system > .controller {
	line-height: 40px;
	padding: 0 10px;
	border-bottom: 1px solid #d7d7d7;
	position: relative;
}

.child-system > .controller > .quit,
.child-system > .controller > .ok {
	display: inline-block;
}

.child-system > .controller > .reset {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.child-system > .controller > .ok {
	float: right;
	line-height: 40px;
}

.system-name {
	line-height: 46px;
	border-bottom: 1px solid #d7d7d7;
	height: 46px;
	color: #2979ff;
	font-size: 14px;
}

.system-name > .nowrap {
	width: 96%;
	white-space: nowrap;
	overflow-x: scroll;
	margin: 0 auto;
}

.system-name > .nowrap > .name {
	display: inline-block;
}

.item-list {
	height: 40vh;
	overflow: auto;
	padding: 0 15px;
}

.item {
	line-height: 37px;
	border-bottom: 1px solid #d7d7d7;
	padding: 0 15px;
}

.push {
	position: fixed;
	bottom: 0;
	left: 0;
	color: #fff;
	background: #307be0;
	width: 100%;
	line-height: 36px;
	font-size: 12px;
	text-align: center;
}

.empty {
	padding: 30px;
	text-align: center;
	font-size: 16px;
}
</style>

<style>
.u-checkbox,
.u-radio {
	line-height: 37px;
}
</style>
